<template>
	<view class="containerbox">
		<ranking_header centent-margin-top="-40" :scrollY="true" class="containerbox">
<!-- 			<template #title>
				
			</template> -->
			
			<!-- <template #centent> -->
				<uv-navbar :fixed="false" bgColor="transparent" leftIconSize="0"/>
				<!-- <view class="title_cont px-30 mb-20 flex-center flex-between">
					<view class="flex-center" @tap="gologin">
						<view class="avatar flex-center">
							<uv-image :src="infoData?.portrait?.url || `${$imageBaseUrl}avatar.png`" width="104rpx" height="104rpx" shape="circle" />
						</view>
						<view>
							<view class="text-40 ml-20">{{ infoData?.name || '去登录' }}</view>
							<view class="flex-center">
								<view class="flex-center round-base bgc-red px-15 py-10 mr-20" @tap.stop="toPage('/pages/other/recharge/index')" v-if="user.islogin">
									<text class="text-26">课时充值</text>
								</view>
								<view class="flex-center round-base bgc-warning px-15 py-10 " @tap.stop="toPage('/pages/study/form')" v-if="user.islogin">
									<uv-image :src="`${imgPath}mine/edit.svg`" width="32rpx" height="32rpx"/>
									<text class="text-26 ml-10"> 信息登记</text>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="flex items-center justify-between pb-40 px-30">
					<view class="flex items-center" @tap="gologin">
						<uv-image :src="infoData?.portrait?.url || `${$imageBaseUrl}avatar.png`" width="148rpx" height="148rpx" shape="circle" />
						<view class="ml-30">
							<view class="text-34 flex items-center text-white">{{infoData?.name || '去登录'}}</view>
							<view class="flex items-center mt-20" v-if="user.islogin">
								<view class="text-24 rd-50 text-white flex items-center py-10 px-20" style="border:1px solid #ffffff" @click="toPage('/pages/other/recharge/index')">
									课时充值
								</view>
								<view class="text-24 rd-50 text-white flex items-center py-10 px-20 ml-20" style="border:1px solid #ffffff" @click="toPage('/pages/study/form')">
									<image :src="`${imgPath}mine/edit.svg`" class="mr-10" style="width: 30rpx; height: 30rpx;"></image> 信息登记
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mx-30 pb-20">
					<view class="flex-between px-30 py-40 bgc-white round-20 mb-30">
						<view class="flex-col flex-center flex-1">
							<view class="text-48 font-weight-600 mine_num">
								{{ Number(infoData?.classHour30) + Number(infoData?.classHour60) + Number(infoData?.classHour120) || 0  }}
							</view>
							<view class="text-26 mt-5 mine_text">剩余课时</view>
						</view>
						
						<view class="flex-col flex-center flex-1">
							<view class="text-48 font-weight-600 mine_num">{{ infoData?.statistics?.totalKnowWords || 0  }}</view>
							<view class="text-26 mt-5 mine_text">累计识词</view>
						</view>
						
						<view class="flex-col flex-center flex-1">
							<view class="text-48 font-weight-600 mine_num">{{infoData?.statistics?.totalClassHour || 0 }}</view>
							<view class="text-26 mt-5 mine_text">累计学时</view>
						</view>
					</view>
					
					
					
					<view class="mine_list mt-20 bgc-white round-20 px-30" @tap.stop>
						<view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/other/notice')">
							<view class="flex-center">
								<view class="w-45 h-45 relative">
									<uv-image :src="`${imgPath}mine/notice.svg`" width="44rpx" height="44rpx"/>
									<text v-if="messageNumber > 0" class="message-number text-20 bgc-warning text-white round-full w-25 h-25 flex-center">{{ messageNumber }}</text>
								</view>
								<text class="text-30 ml-25 mine_num">通知公告</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
						
						<view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/study/collect')">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${imgPath}mine/ctrl.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">收藏夹</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
						
						<view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/study/indextest')">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${imgPath}mine/works_test.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">词汇量测试</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
						
						<view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/records/index')">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${imgPath}mine/records.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">词汇量测试记录</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
						
						<view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/records/ai-reading-record')">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${$imageBaseUrl}/ai-reading-record.png`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">阅读记录</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
            <view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/grammar/index')">
              <view class="flex-center">
                <view class="w-45 h-45">
                  <uv-image :src="`${imgPath}mine/records.svg`" width="44rpx" height="44rpx"/>
                </view>
                <text class="text-30 ml-25 mine_num">语法记录</text>
              </view>

              <fui-icon name="arrowright" size="35" color="#c2c5cc" />
            </view>
						
						<!-- #ifdef MP-WEIXIN -->
						<view class="flex-center flex-between py-35 border-bottom" @tap="toPage('/pages/other/subscribe')" v-if="user.islogin">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${$imageBaseUrl}subscribe.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">我的订阅</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
						<!-- #endif -->
						
						<view class="flex-center flex-between py-35 border-bottom" @tap="codeFn(infoData?.recommendCode)" v-if="user.islogin">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${imgPath}mine/code_1.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">我的推荐码</text>
							</view>
							
							<view class="text-30 color1">{{ infoData?.recommendCode }}</view>
						</view>
					</view>
					
					<view class="mine_list mt-30 bgc-white round-20 px-30" @tap.stop v-if="user.islogin">
						<view class="flex-center flex-between py-35 border-bottom" @tap="editPassFn">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${imgPath}mine/suo.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">修改密码</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
							
						<view class="flex-center flex-between py-35" @tap="quitFn">
							<view class="flex-center">
								<view class="w-45 h-45">
									<uv-image :src="`${imgPath}mine/log_out.svg`" width="44rpx" height="44rpx"/>
								</view>
								<text class="text-30 ml-25 mine_num">退出登录</text>
							</view>
							
							<fui-icon name="arrowright" size="35" color="#c2c5cc" />
						</view>
					</view>
				</view>
				
				
				<!-- #ifdef APP-PLUS -->
				<view>
					<view class="text-gray-80 text-center pb-20 text-20">版本号：{{ versionNumber }}</view>
				</view>
				<!-- #endif -->
			<!-- </template> -->
		</ranking_header>
			
		<dw_tabbar :fiexd="true" />
	</view>
</template>

<script setup>
	
	import { ref,reactive ,computed } from 'vue'
	import { imgPath } from '@/common/config'
	import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app"
	
	import ranking_header from '@/pages/components/header'

	import { loginOut } from '@/common/apis/account'
	import { getRanklist, unreadMessageNumber, userconfig_api } from '@/common/apis/other'
	import { getuserInfo } from '@/common/apis/account'
	
	
	let paging = ref(null)
	let loading = ref(true)
	let mineList = ref([])
	
	let { user } = uni.$store()
	let infoData = computed(() => {
		return user.userInfo
	})
	
	let toPage = str => uni.$fui.href(str)

	function codeFn(str){
		if(!str) return
		uni.setClipboardData({
			data: str,
			success: () => {
				if (uni.getSystemInfoSync().deviceType !== 'pad') {
					uni?.hideToast?.();
					uni.$fui.toast('复制成功', 'success')
				};
			}
		});
	}
	
	let editPassFn = () => uni.$fui.href('/pages/account/mobileEditpassword')
	
	async function quitFn() {  // 退出登陆
		uni.$fui.modal({
			content: '请确认退出登录？',
			success: async () => {
				let { user } = uni.$store()
				await loginOut()
				user.loginOut()
				uni.$fui.href('/pages/account/login', null, false, false)
				uni.$fui.sleep(() => uni.$fui.toast('请重新登录~'))
			}
		})
	} 
	
	let messageNumber = ref(0)
	const trialVal = ref()
	onShow(async () => {
		messageNumber.value = await unreadMessageNumber()
		if(user.token){
			const userinfo = await getuserInfo()
			user.setuserInfo(userinfo)  // 存储用户信息
		}
	})
	
	function gologin() {
		if (user.islogin) return
		uni.$fui.href('/pages/account/login', null, false, false)
	}
	
	
	/** app 当前版本 */
	const versionNumber = ref(0);
	
	// #ifdef APP-PLUS
	const { platform } = uni.getSystemInfoSync();
	plus.runtime.getProperty(plus.runtime.appid, async widgetInfo => {
		const versionCode = widgetInfo.version;
		const updateInfo = {
			"version_number": versionCode,
			"type": platform == 'ios' ? '2' : '1',
			"platform": '1'
		};
		
		const result = await uni.$http.create().setConfig({ url: '/apply-version/check-update', data: updateInfo, showLoading: false }).request();
		versionNumber.value = result?.versionNumber || widgetInfo.version;
	});
	// #endif
	
	
</script>

<style scoped lang="scss">
	.title_cont{color: #fff}
	.mine_num{color: #3A3F5E}
	.mine_text{color: #626780}
	.color1{color: #F69B2C}
	.avatar{width: 110rpx;height: 110rpx;background-color: #fff;border-radius: 50%}
	.message-number{position: absolute;top: 0;right: 0;transform: translateY(-50%)}
</style>